<template>
  <div class="full">
    <!-- <Echart
      id="centreLeft2Chart"
      ref="centreLeft2ChartRef"
      :options="options"
      class="full"
    >
    </Echart> -->

    <v-chart 
      ref="echarts"  
      class="m_0_auto border_box" 
      style="width: 100% !important; height: 100% !important; padding-left: 7%;"
      :options="options" 
      autoresize 
      @click="clickMap" 
    />
  </div>
</template>

<script>
import Echart from './echart/index';

export default {
  components: {
    Echart,
  },
  data() {
    return {
      options: {},
    };
  },
  props: {
    cdata: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        // 设置点的位置(经纬度)
        const geoCoordMap = {
          索博日嘎镇: [118.11022, 24.490474, 20],
          幸福之路苏木: [119.206239, 26.275302, 20],
          巴彦胡硕镇: [118.589421, 24.908853, 20],
          查干沐沦苏木: [117.561801, 24.510897, 20],
          巴彦塔拉苏木乡: [116.82978, 25.391603, 20],
          大坂镇: [119.007558, 25.591011, 20],
          查干诺尔镇: [117.435001, 26.465444, 20],
          宝日勿苏镇: [118.178459, 27.535627, 20],
          西拉沐沦苏木: [119.527082, 27.15924, 20],
        };
        let seriesData = [
          { name: '索博日嘎镇' },
          { name: '幸福之路苏木' },
          { name: '巴彦胡硕镇' },
          { name: '查干沐沦苏木' },
          { name: '巴彦塔拉苏木乡' },
          { name: '大坂镇' },
          { name: '查干诺尔镇' },
          { name: '宝日勿苏镇' },
          { name: '西拉沐沦苏木' },
          // { name: '巴林右旗' }
        ];

        let convertData = function(data) {
          let scatterData = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              scatterData.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return scatterData;
        };
        
        this.options = {
          showLegendSymbol: true,
          tooltip: {
            show: false,
            trigger: 'item',
            textStyle: {
              fontSize: 10,
              lineHeight: 22,
            },
            position: point => {
              // 固定在顶部
              return [point[0] + 50, point[1] - 20];
            },
            // 如果需要自定义 tooltip样式，需要使用formatter
            /*
              formatter: params => {
                return `<div style=""> ... </div>`
              }
            */
          },
          visualMap: {
            min: 0,
            max: 10,
            show: false,
            seriesIndex: 0,
            // 地图区域 颜色
            inRange: {
              color: ['#005b7f', '#005b7f'],
            },
          },
          // 底部背景
          geo: {
            show: true,
            aspectScale: 0.85, //长宽比
            zoom: 1.2,
            top: '8%',
            left: '10%',
            map: '巴林右旗',
            roam: false,
            itemStyle: {
              normal: {
                areaColor: '#15e0b0',
                shadowColor: '#15e0b0',
                shadowOffsetX: 5,
                shadowOffsetY: 5,
              },
              emphasis: {
                areaColor: '#00aeef',
              },
            },
          },
          series: [
            {
              name: '相关指数',
              type: 'map',
              aspectScale: 0.85, //长宽比
              zoom: 1.2,
              mapType: '巴林右旗',      // 自定义扩展图表类型
              roam: false,              // 开启 缩放
              // roamController: {
              //   enable: true,
              //   zoom: 'scale'
              // },
              top: '8%',
              left: '10%',
              itemStyle: {
                normal: {
                  color: 'red',
                  areaColor: '#82fefe50',
                  borderColor: 'rgba(0,242,252,.3)',
                  borderWidth: 1,
                  shadowBlur: 7,
                  shadowColor: '#00f2fc',
                },

                // 鼠标经过颜色
                emphasis: {
                  areaColor: 'rgb(3, 28, 65)',
                  borderColor: 'rgba(0,242,252,.6)',
                  borderWidth: 2,
                  shadowBlur: 10,
                  shadowColor: '#00f2fc',
                },
              },
              label: {
                formatter: params => `${params.name}`,
                show: true,
                position: 'insideRight',
                textStyle: {
                  fontSize: 10,
                  color: '#efefef',
                },
                emphasis: {
                  textStyle: {
                    color: '#fff',
                  },
                },
              },
              data: newData,
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbolSize: 7,
              effectType: 'ripple',
              legendHoverLink: false,
              showEffectOn: 'render',
              rippleEffect: {
                period: 4,
                scale: 2.5,
                brushType: 'stroke',
              },
              zlevel: 1,
              itemStyle: {
                normal: {
                  color: '#99FBFE',
                  shadowBlur: 5,
                  shadowColor: '#fff',
                },
              },
              data: convertData(seriesData),
            },
          ],
        };

        // 重新选择区域
        this.handleMapRandomSelect();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 开启定时器
    startInterval() {
      const _self = this;
      // 应通过接口获取配置时间，暂时写死5s
      const time = 2000;
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        _self.reSelectMapRandomArea();
      }, time);
    },

    // 重新随机选中地图区域
    reSelectMapRandomArea() {
      const length = 9;
      this.$nextTick(() => {
        try {
          const map = this.$refs.centreLeft2ChartRef.chart;
          let index = Math.floor(Math.random() * length);
          while (index === this.preSelectMapIndex || index >= length) {
            index = Math.floor(Math.random() * length);
          }
          map.dispatchAction({
            type: 'mapUnSelect',
            seriesIndex: 0,
            dataIndex: this.preSelectMapIndex,
          });
          map.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index,
          });
          map.dispatchAction({
            type: 'mapSelect',
            seriesIndex: 0,
            dataIndex: index,
          });
          this.preSelectMapIndex = index;
        } catch (error) {
          console.log(error)
        }
      });
    },

    // 重新选择区域
    handleMapRandomSelect() {
      this.$nextTick(() => {
        try {
          const map = this.$refs.centreLeft2ChartRef.chart;
          const _self = this;

          setTimeout(() => {
            _self.reSelectMapRandomArea();
          }, 0);

          // 移入区域，清除定时器、取消之前选中并选中当前
          map.on('mouseover', function (params) {
            clearInterval(_self.intervalId);
            map.dispatchAction({
              type: 'mapUnSelect',
              seriesIndex: 0,
              dataIndex: _self.preSelectMapIndex,
            });
            map.dispatchAction({
              type: 'mapSelect',
              seriesIndex: 0,
              dataIndex: params.dataIndex,
            });
            _self.preSelectMapIndex = params.dataIndex;
          });
          // 移出区域重新随机选中地图区域，并开启定时器
          map.on('globalout', function () {
            _self.reSelectMapRandomArea();
            _self.startInterval();
          });
          this.startInterval();
        } catch (error) {
          console.log(error)
        }
      });
    },

    // 点击 地图上的 旗县 标记
    clickMap(e) {
      this.$emit('clickMap', e.name)
    }
  },
};
</script>

<style>
  .color { color: rgb(65, 155, 239); }

  .s { color: rgb(37, 72, 124); }
</style>
